<template>
	<view>
		<!-- 修改密码框 -->
		<view class="u-p-30">
			<view class="u-p-l-20 u-p-r-20" style="background-color: #FFFFFF;">
				<u-form :model="model" :rules="rules" ref="uForm">
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="phone"
						:label-position="labelPosition" label="手机号码" prop="phone" label-width="180">
						<u-input :border="border" :placeholder="model.phone" v-model="model.phone" type="number"
							:disabled=true></u-input>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="email"
						:label-position="labelPosition" label="验证码" prop="code" label-width="180">
						<u-input :border="border" placeholder="请输入验证码" v-model="model.code" type="text"></u-input>
						<u-button slot="right" type="success" size="mini" @click="getCode">{{codeTips}}</u-button>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="lock"
						:label-position="labelPosition" label="密码" label-width="180" prop="password">
						<u-input :password-icon="true" :border="border" type="password" v-model="model.password"
							placeholder="请输入密码"></u-input>
					</u-form-item>
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="lock"
						:label-position="labelPosition" label="确认密码" label-width="180" prop="rePassword">
						<u-input :border="border" type="password" v-model="model.rePassword" placeholder="请确认密码">
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<view class="u-p-t-30 u-p-b-30">
				<u-button @click="submit" type="primary">提交</u-button>
			</view>
			<view>
				<view class="agreement-text u-font-15">
					本操作将会重置您的登陆密码，请牢记您的新密码
				</view>
			</view>
			<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					phone: uni.getStorageSync('lifeData').userInfo.phone,
					code: '',
					password: '',
					rePassword: '',
				},
				rules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['change', 'blur'],
						},
						{
							// 正则不能含有两边的引号
							pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
							message: '需同时含有字母和数字，长度在6-12之间',
							trigger: ['change', 'blur'],
						}
					],
					rePassword: [{
							required: true,
							message: '请重新输入密码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.model.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change', 'blur'],
						}
					],
				},
				border: false,
				codeTips: '',
				labelPosition: 'left',
			}
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			submit() {
				
				// uni.setStorageSync('lifeData', {
				// 	access_token: "",
				// 	refresh_token: "",
				// 	permissions: "",
				// 	userInfo: {
				// 		avatar: '',
				// 		name: '点击立即登录',
				// 		username: '',
				// 		sex: '',
				// 		department: '',
				// 		major: '',
				// 		clazz: '', // 班级
				// 		grade: '',
				// 		edu_level: '',
				// 		phone: '13607437881',
				// 		// lockFlag:0
				// 		// userId:0
				// 	}
				// })
				
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.$refs.uToast.show({
							title: '修改密码成功',
							type: 'success',
							back: true
						});
					} else {
						console.log('验证失败');
						this.$refs.uToast.show({
							title: '修改密码失败',
							type: 'error'
						})
					}
				});
			},
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.agreement-text {
		display: flex;
		justify-content: center;
		color: $u-tips-color;
	}
</style>
